import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

typedef _CallBack = void Function(String roomCode);

class AddHomeDialog extends StatefulWidget {
  final Image image;
  final _CallBack callback;

  AddHomeDialog({
    this.callback,
    this.image,
  });
  @override
  _AddHomeDialogState createState() => _AddHomeDialogState();
}

class _AddHomeDialogState extends State<AddHomeDialog> {
  List<String> _roomCodeArray = [null, null, null, null, null, null];

  List<String> _btnArray = [
    '1',
    '2',
    '3',
    '4',
    '5',
    '6',
    '7',
    '8',
    '9',
    '清除',
    '0',
    '←'
  ];
  @override
  Widget build(BuildContext context) {
    return UnconstrainedBox(
        //在Dialog的外层添加一层UnconstrainedBox
        constrainedAxis: Axis.vertical,
        child: SizedBox(
            //再用SizeBox指定宽度
            width: ScreenUtil().screenHeight,
            child: Dialog(
              elevation: 0.0,
              backgroundColor: Colors.transparent,
              child: Container(
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(Consts.circular),
                ),
                height: ScreenUtil().screenHeight,
                width: ScreenUtil().screenHeight,
                child: Column(
                  children: [
                    Container(
                      decoration: BoxDecoration(
                        color: Colors.orange[300],
                        borderRadius: BorderRadius.only(
                            topLeft: Radius.circular(Consts.circular),
                            topRight: Radius.circular(Consts.circular)),
                      ),
                      height: ScreenUtil().screenHeight / 10,
                      child: Row(
                        children: [
                          Expanded(
                              flex: 5,
                              child: Center(
                                  child: Text("请输入房间号",
                                      style: TextStyle(
                                          fontSize: 18.sp,
                                          fontWeight: FontWeight.bold)))),
                          Expanded(
                              child: Material(
                                  color: Colors.white.withOpacity(0),
                                  child: Ink(
                                      //设置背景 默认矩形
                                      child: InkWell(
                                    //水波纹的颜色
                                    splashColor: Colors.red,
                                    child: Container(
                                      height: ScreenUtil().screenHeight / 10,
                                      width: ScreenUtil().screenHeight / 10,
                                      child: Icon(
                                        Icons.cancel_outlined,
                                        size: 40.sp,
                                      ),
                                    ),
                                    onTap: () {
                                      Navigator.of(context).pop();
                                    },
                                  ))))
                        ],
                      ),
                    ),
                    Container(
                      height: ScreenUtil().screenHeight / 10,
                      width: double.infinity,
                      margin: EdgeInsets.symmetric(
                          vertical: ScreenUtil().screenHeight / 10 / 3,
                          horizontal: ScreenUtil().screenHeight / 10 / 3),
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(5.00),
                        border:
                            Border.all(color: Colors.black.withOpacity(0.3)),
                        color: Colors.grey[300],
                      ),
                      child: Stack(
                        children: [
                          Align(
                            child: Row(
                                mainAxisAlignment:
                                    MainAxisAlignment.spaceEvenly,
                                crossAxisAlignment: CrossAxisAlignment.center,
                                children: [1, 2, 3, 4, 5]
                                    .map((e) => SizedBox(
                                          child: DecoratedBox(
                                            decoration: BoxDecoration(
                                                color: Colors.grey),
                                          ),
                                          height: ScreenUtil().screenHeight /
                                              10 /
                                              2,
                                          width: 1,
                                        ))
                                    .toList()),
                          ),
                          _roomCodeArray != null && _roomCodeArray.length > 0
                              ? Align(
                                  child: Row(
                                      mainAxisAlignment:
                                          MainAxisAlignment.center,
                                      children: _roomCodeArray
                                          .map((e) => Expanded(
                                                  child: Center(
                                                      child: Text(
                                                e != null ? e.toString() : "",
                                                style: TextStyle(
                                                    fontSize: 20.sp,
                                                    fontWeight:
                                                        FontWeight.bold),
                                              ))))
                                          .toList()),
                                )
                              : Container()
                        ],
                      ),
                    ),
                    Expanded(
                        child: Container(
                      padding:
                          EdgeInsets.all(ScreenUtil().screenHeight / 10 / 4),
                      child: GridView(
                        physics: NeverScrollableScrollPhysics(),
                        padding: EdgeInsets.symmetric(vertical: 0),
                        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                          crossAxisCount: 3, //每一行的列数
                          mainAxisSpacing: 5, //主轴方向上的间距
                          crossAxisSpacing: 10, //交叉轴轴方向上的间距
                          childAspectRatio: 2,
                        ),
                        children: _btnArray
                            .map((item) => Material(
                                borderRadius: BorderRadius.circular(5.00),
                                //设置背景 默认矩形
                                color: Colors.orange[300],
                                child: Ink(
                                    child: InkWell(
                                        onTap: () {
                                          if (item.toString() == '←') {
                                            for (int j =
                                                    _roomCodeArray.length - 1;
                                                j >= 0;
                                                j--) {
                                              if (_roomCodeArray[j] != null) {
                                                _roomCodeArray[j] = null;
                                                break;
                                              }
                                            }
                                            setState(() {});
                                            return;
                                          }
                                          if (item.toString() == '清除') {
                                            _roomCodeArray = [
                                              null,
                                              null,
                                              null,
                                              null,
                                              null,
                                              null
                                            ];
                                            setState(() {});
                                            return;
                                          }
                                          for (int i = 0,
                                                  j = _roomCodeArray.length;
                                              i < j;
                                              i++) {
                                            if (_roomCodeArray[i] == null) {
                                              _roomCodeArray[i] =
                                                  item.toString();
                                              break;
                                            }
                                          }
                                          setState(() {});
                                          if (!checkRoomArray()) {
                                            widget.callback(
                                                _roomCodeArray.join());
                                            setState(() {});
                                          }
                                        },
                                        splashColor: Colors.black,
                                        child: Container(
                                          decoration: BoxDecoration(
                                            borderRadius:
                                                BorderRadius.circular(5.00),
                                            border: Border.all(
                                                color: Colors.black
                                                    .withOpacity(0.3)),
                                          ),
                                          child: Center(
                                              child: Text(
                                            item.toString(),
                                            style: TextStyle(
                                                fontSize: 25.sp,
                                                fontWeight: FontWeight.bold),
                                          )),
                                        )))))
                            .toList(),
                      ),
                    ))
                  ],
                ),
              ),
            )));
  }

  bool checkRoomArray() {
    bool result = false;
    for (int i = 0, j = _roomCodeArray.length; i < j; i++) {
      if (_roomCodeArray[i] == null) {
        result = true;
        break;
      }
    }
    return result;
  }
}

class Consts {
  Consts._();

  static const double padding = 16.0;
  static const double circular = 10.0;
  static const double avatarRadius = 16.0;
}
